/* eslint-disable react-hooks/rules-of-hooks */
import React, { useEffect, useState } from "react";
import { Table, Modal } from "antd";
import type { ColumnsType } from "antd/es/table";
import { DeleteOutlined, EditOutlined } from "@ant-design/icons";
import { hyd_list, hyd_delete } from "../../../api/HuangYuDong/huiyi";
import "../../../styles/HuangYuDong/HuiYi/YuDingJiLu.scss";
import { useNavigate } from "react-router-dom";
function YuDingJiLu(props: any) {
  interface DataType {
    key: string;
    name: string;
    shijian: string;
    renyuan: string;
    time: string;
    mingcheng: string;
    zhuangtai: string;
    caozuo: string[];
  }

  const columns: ColumnsType<DataType> = [
    {
      title: "会议名称",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "会议室名称",
      dataIndex: "mingcheng",
      key: "mingcheng",
    },
    {
      title: "会议室时间",
      dataIndex: "shijian",
      key: "shijian",
    },
    {
      title: "会议状态",
      key: "zhuangtai",
      dataIndex: "zhuangtai",
    },
    {
      title: "预定人员",
      key: "renyuan",
      dataIndex: "renyuan",
    },
    {
      title: "预定时间",
      key: "time",
      dataIndex: "time",
    },
    {
      title: "操作",
      key: "caozuo",
      dataIndex: "caozuo",
      render: (_, record: { key: React.Key }) =>
        list.length >= 1 ? (
          <div className="operation">
            <span
              onClick={() => {
                xiangqing(record);
              }}
            >
              查看详情
            </span>
            <EditOutlined
              onClick={() => {
                xiugai(record);
              }}
            />
            <DeleteOutlined
              onClick={() => {
                del(record);
              }}
            />
          </div>
        ) : null,
    },
  ];
  let [id, useId] = useState("");
  //   删除
  let del = (record: any) => {
    console.log(record, "删除");
    setIsModalOpen(true);
    useId(record.id);
  };
  //   跳转
  let navigate = useNavigate();
  //  修改
  let xiugai = (record: any) => {
    console.log("修改");
    navigate("/index/huiyi/huiyi_xiugai", { replace: false, state: record });
  };
  //  查看详情
  let xiangqing = (record: any) => {
    console.log("查看详情");
    navigate("/index/huiyi/huiyi_xiangqing", { replace: false, state: record });
  };
  // 新增
  let add = () => {
    navigate("/index/huiyi/huiyi_xiugai");
  };
  // 会议列表请求
  let liebiao = () => {
    // 转换时间戳
    var date = new Date(); //时间对象
    var str = date.getTime(); //转换成时间戳
    console.log(str > new Date("2023-01-25 19:41:07").getTime());
    hyd_list().then((ok) => {
      console.log(ok);
      let arr = ok.data.map((v: any, i: any) => {
        return {
          key: i,
          id: v.id,
          name: v.name,
          mingcheng: v.huiyishi,
          shijian: v.ctime,
          zhuangtai: str > new Date(v.ctime).getTime() ? "已结束" : "未开始", //用现在的时间与预定的时间进行比较来决定状态
          renyuan: v.cname,
          time: v.time,
          huiyitixing: v.huiyitixing,
        };
      });
      useList(arr);
    });
  };

  // 列表数据
  let [list, useList] = useState([]);
  useEffect(() => {
    liebiao();
  }, []);
  // 提示框
  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleOk = () => {
    setIsModalOpen(false);
    console.log(id);
    hyd_delete({ id }).then((ok) => {
      console.log(ok);
      liebiao();
    });
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };
  return (
    <div className="yudingjilu">
      <div className="center">
        <h2>
          会议室预定记录{" "}
          <button
            className="add"
            onClick={() => {
              add();
            }}
          >
            添加会议
          </button>
        </h2>
        <Modal
          title="取消确认"
          open={isModalOpen}
          onOk={handleOk}
          onCancel={handleCancel}
          okText="确定"
          cancelText="取消"
        >
          确定取消此会议吗？
        </Modal>
        <Table
          columns={columns}
          dataSource={list}
          pagination={{ pageSize: 7 }}
        />
      </div>
    </div>
  );
}

export default YuDingJiLu;
